<template>
  <div class="app-container">
    <!-- 查询 -->
    <div style="background-color: #fff">
      <div class="container-module">
        <div class="filter-container">
          <el-form :inline="true" class="search-form" size="small">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-form-item label="名称：" class="search-form-item">
                  <el-input
                    v-model="searchForm.name"
                    class="marginBottom"
                    placeholder="请输入名称"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4" style="margin: 5px 0; text-align: right">
                <el-form-item>
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-search"
                    @click="getListWay"
                    >查询</el-button
                  >
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-refresh"
                    @click="resettingWay"
                    >重置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 20px">
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col>
              <el-button
                v-hasPermi="'classification/add'"
                icon="el-icon-circle-plus-outline"
                type="primary"
                size="small"
                @click="addDictionaryWay"
                >添加商户行业</el-button
              >
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col class="with_search_card">
            <el-table
              v-loading="loading"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              highlight-current-row
              :data="dictionaryList"
              style="width: 100%"
              height="100%"
            >
              <el-table-column prop="id" align="center" label="ID" width="100">
              </el-table-column>
              <el-table-column prop="name" align="center" label="行业名称" width="200">
              </el-table-column>
              <el-table-column
                prop="security_deposit"
                align="center"
                label="行业保证金"
                width="130"
              ></el-table-column>
              <el-table-column
                prop=""
                align="center"
                label="行业入驻要求"
              >
              <template slot-scope="scope">
                <div>

                </div>
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row.demand"
                  >
                    <div class="one_line_hidden">
                      {{ scope.row.demand ? scope.row.demand : "-" }}
                    </div>
                  </el-tooltip>

              </template>
              </el-table-column>
              <el-table-column
                prop="lnstructions"
                align="center"
                label="说明"
              ></el-table-column>
              <!-- <el-table-column prop="remark" align="center" label="备注">
              </el-table-column> -->
              <el-table-column prop="created_at" align="center" label="时间">
              </el-table-column>
              <el-table-column
                fixed="right"
                align="center"
                width="180"
                prop="address"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button
                    v-hasPermi="'classification/edit'"
                    style="margin-right: 10px"
                    type="primary"
                    size="mini"
                    @click="putDictionaryWay(scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-popconfirm
                    title="这是一段内容确定删除吗？"
                    @confirm="delDictionaryWay(scope.row)"
                  >
                    <el-button
                      v-hasPermi="'classification/del'"
                      type="danger"
                      size="mini"
                      slot="reference"
                    >
                      移除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row class="marginTop" style="text-align: right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="searchForm.count"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </div>
    </div>
    <!-- 添加修改商户分类 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogdictionary"
      width="700px"
      @close="closeDialogdictionary"
    >
      <div style="position: relative" v-loading="btnLoading">
        <el-row :gutter="20">
          <el-form
            :model="dictionaryForm"
            status-icon
            :rules="rules"
            ref="dictionaryForm"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-col :span="11">
              <el-form-item label="名称" prop="name">
                <el-input
                  type="text"
                  placeholder="请输入分类名称"
                  v-model="dictionaryForm.name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="保证金" prop="security_deposit">
                <el-input
                  type="text"
                  placeholder="请输入保证金"
                  v-model="dictionaryForm.security_deposit"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="类型要求" prop="demand">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="请输入类型要求"
                  v-model="dictionaryForm.demand"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="说明" prop="lnstructions">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="请输入说明"
                  v-model="dictionaryForm.lnstructions"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="备注" prop="remark">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="请输入备注"
                  v-model="dictionaryForm.remark"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="btnLoading" @click="dialogdictionary = false"
          >取 消</el-button
        >
        <el-button
          :loading="btnLoading"
          type="primary"
          @click="submitForm('dictionaryForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCateList,
  addCateList,
  editCateList,
  delCateList,
  getCatedDetail,
} from "@/api/merchant/index";
import { getDictionaryValueList } from "@/api/admin/dictionary";
export default {
  data() {
    return {
      title: "添加商户分类",
      loading: false,
      btnLoading: false,
      dialogdictionary: false,
      searchForm: {
        name: "",
        page: 1,
        count: 10,
      },
      dictionaryForm: {
        id: "",
        name: "",
        demand: "",
        security_deposit: "",
        lnstructions: "",
        remark: "",
      },
      options: [
        {
          label: "启用",
          value: 1,
        },
        {
          label: "禁用",
          value: 2,
        },
      ],
      dictionaryList: [],
      total: 0,
      rules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("名称不能为空"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        security_deposit: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入保证金"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        demand: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入类型要求"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        lnstructions: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入说明"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请选择状态"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    // 查询商户分类
    getListWay() {
      this.loading = true;
      getCateList(this.searchForm)
        .then((res) => {
          this.loading = false;
          if (res.code !== 200) {
            this.$messages.error(res.msg);
            return;
          }
          this.total = res.data.total;
          this.dictionaryList = res.data.list;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 商户分类重置搜索
    resettingWay() {
      this.searchForm = {
        name: "",
        page: 1,
        count: 10,
      };
      this.getListWay();
    },
    // 添加商户分类
    addDictionaryWay() {
      this.title = "添加商户分类";
      this.dialogdictionary = true;
    },
    // 添加修改提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          if (!this.dictionaryForm.id) {
            addCateList(this.dictionaryForm)
              .then((res) => {
                this.btnLoading = false;
                if (res.code !== 200) {
                  this.$messages.error(res.msg);
                  return;
                }
                this.closeDialogdictionary();
                this.getListWay();
              })
              .catch(() => {
                this.btnLoading = false;
              });
          } else {
            editCateList(this.dictionaryForm)
              .then((res) => {
                this.btnLoading = false;
                if (res.code !== 200) {
                  this.$messages.error(res.msg);
                  return;
                }
                this.closeDialogdictionary();
                this.getListWay();
              })
              .catch(() => {
                this.btnLoading = false;
              });
          }
        }
      });
    },
    // 添加修挂弹框关闭
    closeDialogdictionary() {
      this.$refs.dictionaryForm.resetFields();
      this.dialogdictionary = false;
      this.dictionaryForm = {
        id: "",
        name: "",
        demand: "",
        security_deposit: "",
        lnstructions: "",
        remark: "",
      };
    },
    // 删除 商户分类
    delDictionaryWay(row) {
      delCateList({ id: row.id }).then((res) => {
        if (res.code == 200) {
          this.$messages.success("删除成功");
          this.getListWay();
        } else {
          this.$messages.error(res.msg);
        }
      });
    },
    // 修改 商户分类
    putDictionaryWay(row) {
      this.title = "修改商户分类";
      this.dialogdictionary = true;
      this.btnLoading = true;
      getCatedDetail({ id: row.id })
        .then((res) => {
          this.btnLoading = false;
          this.dictionaryForm = res.data;
        })
        .catch(() => {
          this.$messages.error("获取数据失败,请重试");
          this.btnLoading = false;
          this.dialogdictionary = false;
        });
    },
    // 商户分类切换分页
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getListWay();
    },
    // 商户分类切换每页数量
    handleSizeChange(val) {
      this.searchForm.count = val;
      this.getListWay();
    },
  },
};
</script>

<style lang="scss">
.el-divider--horizontal {
  margin: 10px 0 !important;
}
.search-form-item {
  padding-bottom: 10px;
  padding-right: 20px;
  .el-form-item__label {
    font-size: 12px;
    font-weight: 500;
    // width:96px;
  }
  .el-input {
    width: 180px;
  }
}
</style>
    <style lang="scss" scoped>
// .app-container {
//   background-color: #fff !important;
// }
.marginBottom-10 {
  margin-bottom: 10px;
}
.marginRight-10 {
  margin-right: 10px;
}
.flex {
  display: flex;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.button-box {
  font-size: 14px;
  text-align: right;
  font-size: 12px;
  .inquire-box {
    background: #1890ff;
    color: #ffffff;
  }
  .reset-box {
    background: #eeeeee;
  }
}
.app-container {
  background: #f3f5f7;
  .container-module {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    .title-module {
      font-size: 18px;
    }
    .search-module {
      padding-top: 20px;
      display: block;
    }
    .table-module {
      .table-top {
        margin-bottom: 20px;
      }
      .table-num {
        margin-left: 5px;
        background: #f0f0f0;
        width: 35px;
        border-radius: 5px;
      }
    }
  }
}
</style>
